<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #id {
            position: relative;
        }

        .d1 {
            margin-top: 15px;
            margin-bottom: 15px;
            height: 30px;
        }

        img {
            position: absolute;
            top: 20px;
        }

        .s1 {
            position: absolute;
            top: 17px;
            left: 30px;
            font-size: 18px;
            padding-left: 5px;
        }

        .b1 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 120px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .b2 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 20px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .block {
            position: absolute;
            top: 470px;
            right: 0px;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #070707;
            border: 1px solid #409eff;
            margin-left: 120px;
            font-size: 14px;
            padding: 2px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .demonstration {
            display: block;
            color: #8492a6;
            font-size: 14px;
        }

        .c1 {
            margin-top: 6px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="app">
            <div class="d1">
                <img src="生产量统计.png" width="20" height="20">
                <span class="s1">产量情况</span>
                <el-row>
                    <el-col :span="12" class="c1">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                请选择年份<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>2023年</el-dropdown-item>
                                <el-dropdown-item>2022年</el-dropdown-item>
                                <el-dropdown-item>2021年</el-dropdown-item>
                                <el-dropdown-item>2020年</el-dropdown-item>
                                <el-dropdown-item>2019年</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col :span="12" class="c1">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                请选择月份<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>1月</el-dropdown-item>
                                <el-dropdown-item>2月</el-dropdown-item>
                                <el-dropdown-item>3月</el-dropdown-item>
                                <el-dropdown-item>4月</el-dropdown-item>
                                <el-dropdown-item>5月</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <button class="b1">新增</button>
                <button class="b2">批量导入</button>
            </div>
            <template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="日期" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="compony" label="公司" width="150" align="center">
                        <el-table-column width="0">
                            <el-table-column prop="c-p" label="公司计划" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column width="0">
                            <el-table-column prop="c-o" label="公司外输" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column width="0">
                            <el-table-column prop="c-v" label="公司核实" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column width="0">
                            <el-table-column prop="c-e" label="公司末端" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column width="0">
                            <el-table-column prop="devalue" label="差值" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column width="0">
                            <el-table-column prop="end" label="末端" width="50">
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column prop="proudnit" label="生产单位" width="300" align="center">
                        <el-table-column prop="firdistr" label="一区" width="120" align="center">
                            <el-table-column prop="plan" label="计划" width="50">
                            </el-table-column>
                            <el-table-column prop="end2" label="末端" width="50">
                            </el-table-column>
                            <el-table-column prop="percent" label="百分比" width="50">
                            </el-table-column>
                            <el-table-column prop="apportion" label="分摊" width="50">
                            </el-table-column>
                            <el-table-column prop="after-v" label="核实后" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="secdistr" label="二区" width="120" align="center">
                            <el-table-column prop="plan" label="计划" width="50">
                            </el-table-column>
                            <el-table-column prop="end2" label="末端" width="50">
                            </el-table-column>
                            <el-table-column prop="percent" label="百分比" width="50">
                            </el-table-column>
                            <el-table-column prop="apportion" label="分摊" width="50">
                            </el-table-column>
                            <el-table-column prop="after-v" label="核实后" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="thidistr" label="三区" width="120" align="center">
                            <el-table-column prop="plan" label="计划" width="50">
                            </el-table-column>
                            <el-table-column prop="end2" label="末端" width="50">
                            </el-table-column>
                            <el-table-column prop="percent" label="百分比" width="50">
                            </el-table-column>
                            <el-table-column prop="apportion" label="分摊" width="50">
                            </el-table-column>
                            <el-table-column prop="after-v" label="核实后" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="foudistr" label="四区" width="120" align="center">
                            <el-table-column prop="plan" label="计划" width="50">
                            </el-table-column>
                            <el-table-column prop="end2" label="末端" width="50">
                            </el-table-column>
                            <el-table-column prop="percent" label="百分比" width="50">
                            </el-table-column>
                            <el-table-column prop="apportion" label="分摊" width="50">
                            </el-table-column>
                            <el-table-column prop="after-v" label="核实后" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="fifdistr" label="五区" width="120" align="center">
                            <el-table-column prop="plan" label="计划" width="50">
                            </el-table-column>
                            <el-table-column prop="end2" label="末端" width="50">
                            </el-table-column>
                            <el-table-column prop="devalue1" label="差值" width="50">
                            </el-table-column>
                            <el-table-column prop="after-v" label="核实后" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="zhaozhou" label="肇州" width="120" align="center">
                            <el-table-column prop="plan" label="计划" width="50">
                            </el-table-column>
                            <el-table-column prop="end2" label="末端" width="50">
                            </el-table-column>
                            <el-table-column prop="devalue2" label="差值" width="50">
                            </el-table-column>
                            <el-table-column prop="after-v" label="核实后" width="50">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="compony1" label="公司" width="120" align="center">
                            <el-table-column prop="failoil" label="落地油" width="50">
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button @click="dialog=true" type="text" size="small">查看</el-button>
                            <el-button @click="dialog=true" type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-drawer title="产量情况表" :before-close="handleClose" :visible.sync="dialog" direction="ttb"
                    custom-class="demo-drawer" ref="drawer" style="width: 600px;margin: auto;font-size: 18px;"
                    size="80%">
                    <div class="demo-drawer__content">
                        <el-form ref="form" :model="form" label-width="120px">
                            <div>
                                <p class="p1">基础信息：</p>
                                <el-form-item label="生产单位">
                                    <el-input v-model="form.proudnit" placeholder="请输入生产单位"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <p class="p1">数据信息：</p>
                                <el-form-item label="计划">
                                    <el-input v-model="form.plan" placeholder="请输入计划"></el-input>
                                </el-form-item>
                                <el-form-item label="末端">
                                    <el-input v-model="form.end" placeholder="请输入末端数据"></el-input>
                                </el-form-item>
                                <el-form-item label="百分比">
                                    <el-input v-model="form.percent" placeholder="请输入百分比"></el-input>
                                </el-form-item>
                                <el-form-item label="分摊">
                                    <el-input v-model="form.apportion" placeholder="请输入分摊数据"></el-input>
                                </el-form-item>
                                <el-form-item label="核实后">
                                    <el-input v-model="form.afterv" placeholder="请输入核实后的数据"></el-input>
                                </el-form-item>
                                <el-form-item label="公司计划">
                                    <el-input v-model="form.cp" placeholder="请输入公司计划数据"></el-input>
                                </el-form-item>
                                <el-form-item label="公司外输">
                                    <el-input v-model="form.co" placeholder="请输入公司外输数据"></el-input>
                                </el-form-item>
                                <el-form-item label="公司核实">
                                    <el-input v-model="form.cv" placeholder="请输入公司核实数据"></el-input>
                                </el-form-item>
                                <el-form-item label="公司末端">
                                    <el-input v-model="form.ce" placeholder="请输入公司末端数据"></el-input>
                                </el-form-item>
                                <el-form-item label="差值">
                                    <el-input v-model="form.devalue" placeholder="请输入差值"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">取消</el-button>
                                    <el-button>确定</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                        <!-- <div class="demo-drawer__footer">
                            <el-button @click="cancelForm">取 消</el-button>
                            <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading
                                ? '提交中 ...' : '确 定' }}</el-button>
                        </div> -->
                    </div>
                </el-drawer>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper" :total="50">
                    </el-pagination>
                </div>
            </template>
        </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var Main = {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => { });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        },

        data() {
            return {
                tableData: [{
                    date: '当日',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }],
                table: false,
                dialog: false,
                loading: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                timer: null,
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>